<template>
    <div class="iframe">
        <div class="i-title">
            <h3>变量侦听</h3>
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="name" />
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="age" />
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="obj.user[0].score" />
        </div>
        <div class="i-tip">{{name}}</div>
    </div>
</template>

<script>
    import {
        ref,
        watch,
        reactive,
        watchEffect
    } from "vue";
    export default {
        setup() {
            // 定义变量
            let name = ref("张三");
            let age = ref(0);
            let obj = reactive({
                user: [{
                    score: 60
                }]
            });
            // 单独监听
            watch(name, (cur, pre) => {
                console.log(cur, pre, "单个cur,pre")
            })
            // 监听多个变量
            watch([name, age], (cur, pre) => {
                console.log(cur, pre, "多个cur,pre")
            })
            // 监听对象值
            watch(() => obj.user[0].score, (cur, pre) => {
                console.log(cur, pre, "单个对象cur,pre")
            })
            let _num = 0;
            // 观察变量变化的效果
            watchEffect(() => {
                console.log(name.value);
                _num++;
                console.log("一共更新" + _num + "次")
            })
            // 使用页面重新渲染一次
            return {
                name,
                age,
                obj
            }
        }
    }
</script>

